<template>
  <div class="video-part">
    <div class="part-list">
      <div class="part-item"
        v-for="item in parts"
        :key="'p'+item.page"
        :class="{active: part === item.cid}"
        @click="changePart(item)"
      >
        <span>{{ item.part }}</span>
      </div>
    </div>
    <span class="btn" @click="togglePopup"><i class="fa fa-dropdown"></i></span>
    <van-popup
      class="vpopup"
      :show.sync="popupShow"
    >
      <template #title>
        <span>分集({{parts.length}})</span>
      </template>
      <div class="part-list">
        <div class="part-item"
          v-for="item in parts"
          :key="'pp'+item.page"
          :class="{active: part === item.cid}"
          @click="changePart(item)"
        >
          <span>{{item.part}}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import VanPopup from '@/components/popup/Popup.vue'
export default {
  name: 'VideoPart',
  components: {
    VanPopup
  },
  props: {
    parts: {
      type: Array
    },
    currentPart: {
      type: [Number, String]
    }
  },
  data () {
    return {
      part: this.currentPart,
      popupShow: false
    }
  },
  watch: {
    currentPart: {
      handler (newVal) {
        this.part = newVal
      }
    }
  },
  methods: {
    changePart (item) {
      this.part = item.cid
      this.popupShow = false
      this.$emit('update:current-part', this.part)
      this.$emit('select', item)
    },
    togglePopup () {
      this.popupShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .video-part{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: rem(12px);
    @include border1px(#e7e7e7);
  }
  .part-list {
      white-space: nowrap;
      width: rem(365px);
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  .part-item{
    @include border1px(#ccc, 1px, rem(4px));
    color: $color-text-primary;
    font-size: rem(12px);
    padding: rem(5px) rem(9px);
    box-sizing: border-box;
    margin-right: rem(8px);
    span {
      display: block;
      width: rem(112px);
      height: rem(34px);
      line-height: rem(17px);
      white-space: normal;
      word-break: break-all;
      overflow: hidden;
    }
    &.active{
      color: $theme-color;
      &::after{
        border-color: $theme-color;
      }
    }
  }
  .vpopup {
    .part-list{
      width: auto;
      flex-wrap: wrap;
      align-items: baseline;
      overflow-x: hidden;
      overflow-y: scroll;
      height: rem(316px);
      justify-content: space-between;
    }
    .part-item{
      height: rem(34px);
      padding: rem(16px) rem(11px);
      background-color: #fff;
      box-sizing: content-box;
      margin-right: 0;
      margin-bottom: rem(12px);
      span{
        width: rem(139px);
      }
    }
  }
  @media screen and (orientation:portrait) {
    .vpopup {
      top: rem(255px)
    }
  }
</style>
